<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in parentCategoryList" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view v-for="item in parentCategoryList" :key="item.id" class="s-list" :id="'main-'+item.id">
				<text class="s-item">{{item.name}}</text>
				<view class="t-list">
					<view @click="navToCategoryPage(titem.id)" v-if="titem.parentId === item.id" class="t-item" v-for="titem in books" :key="titem.id">
						<image :src="titem.iconUrl"></image>
						<text>{{titem.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
    import commonOnLoad from '../../common/common_on_load.js';  
	
    import {  
        mapState ,
		mapGetters
    } from 'vuex';  
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				parentCategoryList: [],
				books: [],
				isRunTabItemTap:true
			}
		},
		onLoad(options){
			this.isRunTabItemTap = false;
			commonOnLoad.commonOnLoad(this.$mRoutesConfig.user,options,options.referenceId);//options.referenceId
			setTimeout(() => {
				// #ifdef H5  
				if (this.$wechat && this.$wechat.isWechat()) {  
					var url = this.$mConfig.baseUrl + "/api/shorturl/" + this.$mConfig.mpAppId + "/index";
					if(this.$store.getters.hasLogin){
						url = url + "?referenceId=" + this.$store.state.userInfo.id;
					}
					 this.$wechat.share({  
						  desc: this.$mConfig.descTxt,  
						  img: this.$mConfig.logoImgUrl,  
						  title:this.$mConfig.loginTitleTxt,  
					},url);  
				}  
				// #endif  
			}, 1000);
			this.loadData();
			// #ifdef MP
			if (!this.$store.getters.hasLogin ) {
				this.$store.commit("SET_IS_SILENT_LOGIN", true);
				this.silentLogin();
			}
			// #endif
		},
		onTabItemTap(event){
			if(this.isRunTabItemTap){
				this.loadData();
			}else{
				this.isRunTabItemTap = true;
			}
		},
		onShareAppMessage() {
			let path = "/pages/index/index";
			if(this.$store.getters.hasLogin){
				path = path + "?referenceId=" + this.$store.state.userInfo.id;
			}
			return {
				title: this.$mConfig.descTxt,
				path: path,
				imageUrl:this.$mConfig.logoImgUrl
			}
		},
		methods: {
			loadData(){
				this.getParentCategoryList();
				this.getBooks();
			},
			async getParentCategoryList(){
				var query = {
					type:1,
				};
				let data = await this.$apis.getBookIndex("L1",query);
				console.log(JSON.stringify(data));
				this.parentCategoryList = data.categoryList;
			},
			async getBooks(){
				var query = {
					limit:100,
					type:2,
				};
				let data = await this.$apis.getBookIndex("L2",query);
				this.books = data.categoryList;
			},
			//一级分类点击
			tabtap(item){
				if(!this.sizeCalcState){
					this.calcSize();
				}
				this.currentId = item.id;
				let index = this.parentCategoryList.findIndex(sitem=>sitem.id === item.id);
				this.tabScrollTop = this.parentCategoryList[index].top;
			},
			//右侧栏滚动
			asideScroll(e){
				if(!this.sizeCalcState){
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.parentCategoryList.filter(item=>item.top <= scrollTop).reverse();
				if(tabs.length > 0){
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(){
				let h = 0;
				this.parentCategoryList.forEach(item=>{
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						console.log(JSON.stringify(data));
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			share(){
				// #ifdef H5  
				this.showShareClass = 'show';
				// #endif  
				// #ifdef MP-WEIXIN && APP-PLUS
				let shareOPtions = {
					provider: "weixin",
					scene: 'WXSceneSession',   
					type: 5,
					success: (e) => {
						console.log('success', e);
					},
					fail: (e) => {
						console.log('fail', e)
					},
					complete:function(){
						console.log('分享操作结束!')
					}
				};
				shareOPtions.imageUrl = this.$mConfig.logoImgUrl;
				shareOPtions.title = this.$mConfig.descTxt;
				let path = "/pages/index/index";
				if(this.$store.getters.hasLogin){
					path = path + "?referenceId=" + this.$store.state.userInfo.id;
				}
				shareOPtions.miniProgram = {
					id:this.$mConfig.xcxId,
					path: path,
					webUrl:this.$mConfig.h5Url,
					type: 0
				};
				console.log(JSON.stringify(shareOPtions));
				uni.share(shareOPtions);
				// #endif  
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		&.active{
			color: $base-color;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 140upx;
			height: 140upx;
		}
	}
</style>
